<template>
  <q-modal v-model="modalVisible" :header="`${$t('MapCore.HeatMap')}`" :menuBtn="false" :persistent="false"
           classes="column no-wrap" fullHeight fullWidth>
    <qx-form v-model="searchForm" :option="searchOption" class="q-py-md no-margin" isSearch
             @submit="startSearch"></qx-form>
    <IndexMonitoring v-model:openedMapCode="openedMapCode" v-model:refreshHeatMap="refreshHeatMap"
                     :injectHeatMapSearch="injectHeatMapSearch" classes="col"
                     heatMapUri="/yfagv/api/execL3TaskStat/queryTaskAreaStat" nonHeader readonly
                     source="heatMap"></IndexMonitoring>
  </q-modal>
</template>

<script setup>
import { i18n, toI18nName } from 'boot/i18n'
import { date } from 'quasar'
import { getRemoteData } from 'src/enum/ajaxRemoteData.js'
import { AGVTypes } from 'src/enum/index.js'
import IndexMonitoring from 'src/views/MapCore/IndexMonitoring.vue'
import { computed, nextTick, ref, watch } from 'vue'

const AMRs = ref([])
const currentDate = new Date()
const AGVBrands = ref([])
const openedMapCode = ref('')
const refreshHeatMap = ref(false)
const injectHeatMapSearch = ref({})
const searchForm = defineModel('heatMapSearch', { type: Object, default: {} })
const modalVisible = defineModel('modelValue', { type: Boolean, default: false })
const filterAMRs = computed(() => {
  if (!searchForm.value.agvBrandCode && !searchForm.value.taskCreateType) return AMRs.value
  if (!searchForm.value.agvBrandCode) return AMRs.value.filter(
    amr => searchForm.value.taskCreateType.includes(amr.agvTypeCode))
  return AMRs.value.filter(amr => amr.agvBrandCode === searchForm.value.agvBrandCode)
})
const searchOption = computed(() => {
  const to = date.formatDate(currentDate, 'YYYY-MM-DD')
  const from = date.formatDate(date.subtractFromDate(currentDate, { days: 30 }), 'YYYY-MM-DD')
  return {
    searchSpan: 4, column: [{
      label: `${i18n.t('Misc.StatisticsDate')}`, field: 'statisticalDate', type: 'daterange', searchRequired: true,
      searchLabelWidth: 70, clearable: false, searchValue: { from, to }
    }, {
      label: `${i18n.t('AGVCore.AGVBrand')}`, field: 'agvBrandCode', type: 'select', options: AGVBrands.value,
      props: { label: `${toI18nName('agvBrandNameZhCn')}`, value: 'agvBrandCode' },
      searchLabelWidth: 70
    }, {
      label: `${i18n.t('AGVCore.AGVType')}`, field: 'taskCreateType', type: 'select',
      searchMultiple: true, options: AGVTypes.value, searchValue: '10'
    }, {
      label: `${i18n.t('AGVCore.AGVCode')}`, field: 'amrCode', type: 'select', options: filterAMRs.value,
      searchMultiple: true, props: { label: 'agvDeviceName', value: 'agvDeviceCode' }
    }, {
      label: `${i18n.t('TaskCore.TaskTemplateCode')}`, field: 'taskTemplateCode'
    }]
  }
})

watch(modalVisible, val => val && getBrandsAndAMRs())
const getBrandsAndAMRs = () => {
  getRemoteData('agv_amr', '/yfagv/api/agvManage/list').then(data => AMRs.value = data)
  getRemoteData('agv_brand', '/yfagv/api/agvCfgBrand/list').then(data => AGVBrands.value = data)
  initData()
}
const formatSearchForm = () => {
  const params = { ...searchForm.value }
  if (params.statisticalDate && params.statisticalDate.from) {
    params.startDateTime = params.statisticalDate.from
    params.endDateTime = params.statisticalDate.to
    delete params.statisticalDate
  }
  if (params.amrCode) params.amrCode = params.amrCode.split(',')
  if (params.taskStatus) params.taskStatus = params.taskStatus.split(',')
  if (params.mapCodeList) params.mapCodeList = params.mapCodeList.split(',')
  if (params.taskCreateType) params.taskCreateType = params.taskCreateType.split(',')
  if (params.taskTemplateCode) params.taskTemplateCode = params.taskTemplateCode.split(',')
  params.mapCode = openedMapCode.value
  return params
}
const initData = () => nextTick(() => injectHeatMapSearch.value = formatSearchForm())
const startSearch = (_, done) => {
  done && done()
  injectHeatMapSearch.value = formatSearchForm()
  refreshHeatMap.value = true
}
</script>